<template>
  <user-card-list :user-list="userList" />
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {showToast} from 'vant';
import {Toast} from 'vant';

import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs'
import UserCardList from "../components/UserCardList.vue";


const route = useRoute();
// console.log(route)

const {tags} = route.query;

const userList = ref([]);

onMounted(async () => {
  // 上述请求也可以按以下方式完成（可选）
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    //用鱼皮的这个我的头像不会显示。
    // paramsSerializer: params =>{
    //   return qs.stringify(params,{indices: false})
    // }
    //序列化
    paramsSerializer:  {
      serialize: params => qs.stringify(params, { indices: false}),
    }
  })
  .then(function (response) {
    // console.log('/user/search/tags success', response);
    // showToast("请求成功")
    return response?.data;
  })
  .catch(function (error) {
    // console.error('/user/search/tags error', error);
    showToast('请求失败')
  });
  // if (Array.isArray(userListData)) {
  //   console.log("aaa", userListData)
  //   userListData.forEach(user => {
  //     if (user.tags) {
  //       user.tags = JSON.parse(user.tags);
  //     }
  //   })
  //   userList.value = userListData;
  //   console.log("111", userList.value)
  // }// 遍历date数组并将每个对象转换为字符串（例如，使用JSON.stringify）并添加到userList.value中
  if (userListData) {
    (userListData.date).forEach(user => {
      // console.log("userListData", userListData)
      // console.log("user.tags", user.tags)
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
      // 这里我们使用JSON.stringify将对象转换为数组，但您可以根据需要进行更复杂的处理
      // userList.value.push(user);
    });
    userList.value = userListData.date;
// 现在userList.value包含了date数组中每个对象的字符串表示
//     console.log(userList.value);
  }

})


// const mockUser = {
//   id: 123456,
//   username: '二蛋',
//   userAccount: '123456',
//   avatarUrl: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
//   gender: 0,
//   profile: '一名24届程序员，目前还有头发，无不良喜好，想找一名前端整合完善项目谢谢大家，',
//   phone: '12312312333',
//   email: '12345@qq.com',
//   userRole: 0,
//   planetCode: '1234',
//   tags: ['java', 'emo', '打工中', 'java', 'emo', '打工中',],
//   createTime: new Date(),
// };

</script>

<style scoped>

</style>